<template>
  <div>
    <van-cell
      v-for="(item, index) in highrLightSuggestions"
      :key="index"
      icon="search"
      @click="$emit('Update-keywords',Suggestions[index])"
    >
      <template #title>
        <span v-html="item"></span>
      </template>
    </van-cell>
  </div>
</template>

<script>
import { getSuggestionsAPI } from '@/api'
import { debounce } from 'lodash'

// 当keywrods发生变化的时候 发生了什么
// 1 决定渲染搜索建议组件
// 2 监视keywords发生变化 请求搜索建议

export default {
  data() {
    return {
      Suggestions: []
    }
  },
  props: {
    keywrods: {
      type: String,
      required: true
    }
  },
  computed: {
    // map方法
    // - 返回值 跟原数组长度一致的新数组

    // 动态正则
    // 字面量正则 /a/ 缺点：正则公式是写死的
    // RegExp -=-> regular expression new RegExp(正则内容字符串，修饰符字符串)

    // 字符串的replace
    // 返回值：替换后的新字符串
    // replace（字符串，替换的字符串）
    // replace(正则，替换的字符串)
    // replace(正则，函数) 函数的返回值作为途欢的结果 match函数的参数 返回正则匹配的结果

    highrLightSuggestions() {
      const reg = new RegExp(this.keywrods, 'ig')
      return this.Suggestions.map((str) => {
        return str.replace(
          reg,
          (match) => `<span style='color:red'>${match}</span>`
        )
      })
    }
  },
  watch: {
    keywrods: {
      handler: 'getSearchSuggestions',
      immediate: true
    }
  },
  methods: {
    //防抖
    // 在频繁触发时   间隔时间段内只执行一次
    // 用定时器包裹
    // 清除上一次的定时器
    getSearchSuggestions: debounce(async function () {
      const { data } = await getSuggestionsAPI(this.keywrods)
      // this.Suggestions = data.data.options

      // 版本一
      // this.Suggestions = data.data.options.filter((item) => item !== null)

      //版本二
      this.Suggestions = data.data.options.filter(Boolean)
    }, 300)
  }
}
</script>

<style></style>
